<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery 移除元素的方式</title>
</head>
<body>
  <div class="box2">
    嘻嘻嘻
    <p>这是p标签2</p>
  </div>
  <div class="box1">
    哈哈哈
    <p>这是p标签1</p>
  </div>
  <div class="box">
    呵呵呵
    <p>这是p标签</p>
  </div>
  <div class="container"></div>
  <div></div>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    //empty() - 用于清空元素内容和其中的标签元素 - 推荐
    $('.box').empty();
    
    //html('') - 使用html方法传入空字符串 可以清空内容和其中的标签元素
    $('.box1').html('');

    //remove() - 用于移除元素自身
    // - 参数：选择器字符串，表示从调用的元素中选取一部分进行删除
    //  - 目的是为了完善链式编程
    $('.box2').remove();
    $('div').css('width',100).remove('.container');
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery中克隆元素(标签)节点</title>
</head>
<body>
  <div class="box">呵呵呵<span>这是span</span></div>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    //克隆节点clone()
    // - 注意点：要克隆的节点和内部均不能有id,否则会重复
    // - false：深拷贝，默认值
    // - true：深拷贝同时拷贝事件
    $('.box').click(function(){
      alert('今天天气不错');
    });
    // $('body').append($('.box').clone());//只拷贝了标签元素以及内容
    $('body').append($('.box').clone(true));//事件 标签元素 内容都拷贝了
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery 元素行内属性的操作</title>
</head>
<body>
  <div class="box1" id="box1" title="这是box1" data-hehe="a1" style="background-color: yellowgreen;"></div>
  <div class="box" id="box" title="这是box" data-hehe="a"></div>
  <select name="" id="">
    <option value="" selected id="bj">北京</option>
  </select>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    var $box = $('#box');
    // 1 prop()用于操作元素行内的自带属相
    //  - 设置操作
    //    - 单个设置操作：传入两个参数，代表属性名和新的属性值
    //    - 多个设置操作：传入对象，对象的属性名为要设置的行内属性名
    $box.prop('class','f1');
    $box.prop('title','这是新的title');
    // $box.prop('data-hehe','ab');//可以设置行内自定义属性值，但是我们看不到任何显示，但是可以通过prop()获取进行操作
    $box.prop({
      class: 'f1',
      title: '这是新的title',
    });
    //  - 获取操作
    console.log($box.prop('title'));//控制台输出 这是新的title(通过属性名可获取属性值也就是属性的内容)
    console.log($box.prop('data-hehe'));//控制台输出 undefind(prop()方法无法获取到行内自定义属性的内容)
    
    // 2 attr()用于操作元素的行内自定义属性(操作方式与prop()完全一样)
    //  - attr()不仅可以操作自定义行内属性，也可以操作自带行内属性
    //  - 设置操作   
    $('#box1').attr('class','f1');
    // $('#box1').attr('data-hehe','ab1');//可以设置行内自定义属性，并且可以在行内自定义属性中看到
    $('#box1').attr({
      class: 'f1',
      title:'这是新的title1'
    });
    //  - 获取操作
    console.log($('#box1').attr('title'));//控制台输出 '这是新的title1'
    console.log($('#box1').attr('data-hehe'));//控制台输出 'ab'

    // - 获取某些自带行内属性时，prop的结果比attr更加贴切
    console.log($('#bj').attr('selected'));//控制台输出 'selected'
    console.log($('#bj').prop('selected'));//控制台输出 true

    // 3 data()用于操作元素的行内自定义属性(比attr操作更方便)
    //  - 使用data进行自定义属性获取时，data-不需要书写
    console.log($box.data('hehe'));//控制台输出 'a'(使用data()获取为data-hehe属性，data-不能书写)
    console.log($box.attr('data-hehe'));//控制台输出 'a'(使用attr()获取为data-hehe属性，data-必须书写)
    
    //  - 特点：通过data()进行属性设置后，这个属性无法在行内看到
    //   - 但是使用是没有问题，不影响
    $box.data('index',100);
    console.log($box.data('index'));//控制台输出 100

    //使用小结：
    // - 当我们操作元素(标签)行内自带属性时，使用prop()
    // - 当我们操作元素(标签)行内自定义属性时，使用data()
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery 宽高的操作</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #box{
      width: 100px;
      height: 100px;
      padding: 10px;
      border: 3px solid #000;
      background-color: red;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    var $box = $('#box');
    // -width() 用于操作元素的宽度(width)
    // - 获取  - 设置
    console.log($box.width());//控制台输出 100
    $box.width(200);//盒子的宽度现在是200px

    // - innerWidth() 用于操作元素的宽度(width + padding)
    //  - 最终修改的为width的值
    console.log($box.innerWidth());//控制台输出 220px
    $box.innerWidth(200);//修改的是宽度width：180px padding值没有改变

    // - outerWidth() 用于操作元素的宽度(width + padding + border)
    console.log($box.outerWidth());//控制台输出 206px
    //  - 额外参数true(参数2)，可以设置元素总宽度(width + padding + margin + boder)
    $box.outerWidth(200,true);//修改的是宽度width:154px  padding margin boder的值都没有改变
    $box.outerWidth(200);//没有true参数 修改的是宽度width:174px  padding boder的值都没有改变
    
    // 可以获取元素的宽度(width + padding + margin + boder)
    console.log($box.outerWidth(true));//控制台输出 220px

    //说明：与上面的功能对应的还有一组用于高度操作的方法
    // height()  innerHeight()  outerHeight()   outHeight(true)
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery offset方法</title>
  <style>
    /* *{
      margin: 0;
      padding: 0;
    } */
    #fa{
      width: 200px;
      height: 200px;
      border: 3px solid #000;
      position: relative;
    }
    #box{
      width: 100px;
      height: 100px;
      background-color: pink;
      /* position: absolute;
      left: 100px;
      top: 100px; */
    }
  </style>
</head>
<body>
  <div id="fa">
    <div id="box"></div>
  </div>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    // jquery中提供了 offset(),用于获取元素到页面的距离
    //  - offset()进行获取时，结果为对象，含有两个属性left和top
    console.log($('#box').offset());//{top:3 left:3}

    //  - 设置offset方法：
    //    - 当设置offset()的值时，如果元素没有定位，会自动添加相对定位
    //    - 不推荐使用默认的相对定位，推荐自己添加绝对定位
    $('#box').offset({
      left:100,
    });
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jquery的事件</title>
  <style>
    #box{
      width: 200px;
      height: 200px;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <button id="btn">按钮</button>
  <div id="box">
    <p>这是原始的p标签</p>
    <span>这是span标签</span>
    <p>这是原始的p标签</p>
  </div>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    var $btn = $('#btn');
    //1.基本事件设置方式
    $btn.click(function(){
      console.log('这是点击事件');
    });
    $btn.mouseenter(function(){
      console.log('这是鼠标进入事件');
    });
    //2.bind()可以同时给元素指定多个事件
    $btn.bind('click mouseenter',function(){
      console.log('这是btn的事件，点击事件和鼠标进入事件')
    });
    $btn.bind({
      click:function(){
        console.log('这是使用bind()方法写的 点击事件')
      },
      mouseenter:function(){
        console.log('这是使用bind()方法写的 鼠标进入事件')
      },
    });
    // - 上面的设置方法均无法进行事件委托(演示 点击按钮新创建出来的p标签没有点击事件)
    $btn.click(function(){
      $('#box').append('<p>这是创建的p标签</p>');
    });
    $('#box > p').click(function(){
      console.log('这是box中的p标签');
    });

    //3.delegate()用于设置事件委托
    $('#box').delegate('p','click',function(){
      console.log('这是box中的p标签 使用delegate()方法设置事件委托');
    });

    //4.on()方法统一了所有的事件设置方式(重点掌握)
    // 4.1 通过on()设置普通事件
    $btn.on('click',function(){
      console.log('这是使用on()方法写的 btn点击事件');
    });
    // 4.2 通过on()设置多个事件
    $btn.on('click mouseenter',function(){
      console.log('这是使用on()方法写的 btn点击事件和鼠标进入事件')
    });
    $btn.on({
      click:function(){
        console.log('这是使用on()方法写的 btn点击事件click')
      },
      mouseenter:function(){
        console.log('这是使用on()方法写的 btn点击事件mouseenter')
      },
    });
    // 4.3 通过on()方法设置事件委托
    //  - 参数：参数1：事件类型， 参数2：选择器， 参数3：事件处理程序
    $('#box').on('click','p',function(){
      console.log('这是box中的p标签 使用on()方法设置事件委托')
    });

    //上述功能中需要掌握的是 on()方法的三种使用方式，前面的方式作为了解
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jquery 移除事件的方法off()</title>
  <style>
    #box{
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="box">
    <p>这是p标签</p>
  </div>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    var $box = $('#box');
    function fun(){
      console.log('这是box的点击事件');
    };
    $box.on('click',fun);
    $box.on('mouseenter',function(){
      console.log('这是box的鼠标进入事件');
    });
    $box.on('click','p',function(){
      console.log('这是委托p标签的点击事件');
    });
    // off()用来移除事件
    //  1. 不传参数：移除元素所有事件
    $box.off();
    //  2. 传入参数：传入类型字符串，移除指定类型的事件
    $box.off('click');
    $box.off('click mouseenter');
    //  3. 传入参数：移除事件委托
    //   - 参数1：事件类型， 参数2：'**'代表事件委托
    $box.off('click','**');
    //  4. 传入参数：指定事件处理程序移除
    //   - 参数1：事件类型， 参数2：事件处理程序(必须为命名函数，与设置时为同一个)
    $box.off('click',fun);
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jquery中return false的使用</title>
</head>
<body>
  <div>
    <a href="02克隆节点.html">这是a标签</a>
  </div>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    // DOM中 return false可以取消标签的默认事件效果(例如 a标签的跳转效果)
    // jQuery中 return false 不仅可以取消标签默认事件效果，还能阻止事件传播(不会产出事件冒泡)
    
    // jQuery的事件对象中提供了两个方法，分别支持这两个功能
    // e.stopPropagation(); - 阻止事件传播(阻止事件冒泡)
    // e.preventDefault(); - 取消标签的默认事件效果

    $('a').on('click',function(e){
      console.log('点击a标签');
      // return false
      e.preventDefault();
      e.stopPropagation();
    });

    $('div').on('click','a',function(){
      console.log('这是事件委托的功能');
    });
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jquery恢复断链 end()方法</title>
</head>
<body>
  <ul>
    <li></li>
    <li></li>
    <li id="item">这是当前li</li>
    <li></li>
    <li></li>
  </ul>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    //分别设置id为item的元素 前面的li 和 后面的li的内容
    $('#item').prevAll().text('这是前面的li');
    $('#item').nextAll().text('这是后面的li');
    // - jQuery中提供了一个end()方法，可以访问上一次的操作的jQuery对象
    $('#item').prevAll().text('这是前面的li').end().nextAll().text('这是后面的li');
    
    //注：这种使用方式可以根据自身情况选择，如果觉得不适应，可以不使用
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery的多库共存</title>
</head>
<body>
  <div></div>
  <script src="jquery-1.12.4.min.js"></script>
  <script>
    // jQuery提供的两个顶级对象名称 $ jQuery 可能与文件中的其他变量名重名，导致冲突
    // jQuery中提供了一个方法 $.noConflict();
    //  - 不传参使用时, 放弃名称 $
    //  - 传入参数 true, 放弃名称 jQuery
    //  - 方法具有返回值, 返回jQuery顶级对象的命名权

    $.noConflict();
    console.log($);
    console.log(jQuery);
    jQuery.noConflict(true);
    console.log($);
    console.log(jQuery);

    var $haha = jQuery.noConflict(true);
    $haha('div').text('这是div中的内容');
    //注：上面的操作可以作为了解，因为出现场景较少
  </script>
</body>
</html> -->

<!-- <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery插件的使用</title>
</head>
<body>
  <script>
    // jQuery插件的内容说明：
    //    - 今天讲什么是jQuery插件，已经使用方式
    //    - js高级中讲如何制作jQuery插  

    // jQuery插件的概念：
    //    - jQuery插件的作用是扩展jQuery的功能。
    //    - jQuery插件的本质是js文件，这个插件会依赖于jQuery主文件
    //      - 使用时必须先引入jQuery主文件，然后再引入插件
    // jQuery插件的使用方式（常见的插件使用方式）：
    //    - 在插件的目录中提供了readme文件，内部提供了直接的使用示例代码
    //    - 在插件的目录中提供了readme文件，内部提供了使用插件的关键步骤
    //    - 在目录中提供了示例页面，可以通过演示效果和查看源代码的方式观察用法
    //    - 提供示例页面，在页面中通过图文结合的方法展示用法  
    
    // 常见的jQuery插件网站：
    //    - 百度
    //    - http://www.htmleaf.com/
    //    - http://www.jq22.com/
    
  </script>
</body>
</html> -->